import React, {FC, useCallback, useEffect, useRef, useState} from 'react';
import {Animated} from 'react-native';
import globalService from 'M/Services/GlobalService';
import Style from 'M/UI/Style';
import {Theme} from '@react-navigation/native';
import {Image, TouchableWithoutFeedback, View} from 'M/UI/Libraries';
import {close} from 'M/Resource/icon';

interface RisingViewProps {}

export interface UpViewEvent {
  show: (view: () => JSX.Element, showClose?: boolean) => void;
  close: (isAnimate?: boolean) => Promise<any>;
}

const UpViewParent: FC<RisingViewProps> = () => {
  const viewHeight = useRef(new Animated.Value(0)).current;
  const [children, setChildren] = useState<JSX.Element>(<></>);
  const [showClose, setShowClose] = useState<boolean>(true);
  const [showUpView, setShowUpView] = useState<boolean>(false);
  const [backgroundColor, setBackgroundColor] = useState<string>(
    Style.theme.colors.background,
  );

  function reset(resolve: (boolean: boolean) => void) {
    setChildren(<></>);
    setShowUpView(false);
    resolve(true);
  }

  const onClose = useCallback(
    (isAnimate: boolean = true) => {
      return new Promise(resolve => {
        if (!isAnimate) {
          reset(resolve);
          return;
        }
        Animated.timing(viewHeight, {
          toValue: 0,
          duration: 500,
          useNativeDriver: true,
        }).start(() => {
          reset(resolve);
        });
      });
    },
    [viewHeight],
  );
  useEffect(() => {
    Style.addThemeChangeListener((theme: Theme) =>
      setBackgroundColor(theme.colors.background),
    );
    globalService.setUpView({
      show: (view, showClose = true) => {
        setChildren(view);
        setShowUpView(true);
        setShowClose(showClose);
        Animated.timing(viewHeight, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }).start();
      },
      close: onClose,
    });
  }, [viewHeight, onClose]);

  return showUpView ? (
    <View
      style={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        top: 0,
        justifyContent: 'flex-end',
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
      }}>
      <Animated.View
        style={{
          backgroundColor,
          transform: [
            {
              translateY: viewHeight.interpolate({
                inputRange: [0, 1],
                outputRange: [280, 0],
              }),
            },
          ],
        }}>
        <TouchableWithoutFeedback onPress={() => onClose(true)}>
          <View
            style={{
              justifyContent: 'flex-end',
              alignItems: 'flex-end',
              paddingRight: 3,
              paddingTop: 3,
            }}>
            {showClose ? (
              <Image source={close} style={{width: 30, height: 30}} />
            ) : (
              <></>
            )}
          </View>
        </TouchableWithoutFeedback>
        {children}
      </Animated.View>
    </View>
  ) : (
    <></>
  );
};
export default UpViewParent;
